import React, {useEffect, useState} from 'react';
import {Modal, QRCode} from "antd";
import s from "./index.module.less"
import jsCookie from "js-cookie";
// import gzhImg from "/static/gzherweima.jpg"
//
// console.log(gzhImg)
function UseBindWx({queryList}) {
    const [open,setOpen] = useState(false),
        [loading,setLoading] = useState(false),
        [step,setStep] = useState(1);
    function onCancel(){
        setOpen(false)
    }
    useEffect(()=>{
    },[open])
    function onOk(){
        if (step === 1){
            setStep(2)
        }else{
            onCancel();
            queryList();
            setStep(1);
        }
    }
    const info = JSON.parse(jsCookie.get("info")||"{}")
    const rurl = encodeURIComponent(`https://ouyujingcheng.com/wx/bindAccount?id=${info.id}`)
    return {
        setOpen,
        ModalDOM:<Modal
            title={"绑定推送消息二维码"}
            open={open}
            onOk={onOk}
            onCancel={onCancel}
            confirmLoading={loading}
            width={800}
            okText={step === 1?"已关注，下一步":"已完成绑定"}
        >
            {
                step === 1 && <div className={s.flex}>
                    <div>步骤一，先关注微信公众号</div>
                    <div>
                        <img src="/static/gzherweima.jpg" alt=""/>
                    </div>
                </div>
            }
            {
                step === 2 && <div className={s.flex}>
                    <div>步骤二，使用微信扫码绑定账号</div>
                    <div>
                        <QRCode
                            value={`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx4f4311d68ab529b4&redirect_uri=${rurl}&response_type=code&scope=snsapi_base&state=ouyu`}
                            size={228}
                        />
                    </div>
                </div>
            }


        </Modal>
    }
}

export default UseBindWx;